import React, {Component} from 'react'
import {observer} from 'mobx-react';
import { withRouter } from 'react-router-dom';
import { Icon, Tree, Avatar } from "weaver-mobile";
import VirtualOrg from './VirtualOrg';
import Leaf from './Leaf';

@withRouter
@observer
export default class OrgTreeList extends Component{
    render(){
        const { store } = this.props;
        const { toJS, treeData, asyncOrgChildNode } = store;
        let datas = toJS(treeData);
        const treePageProps = {
            datas: datas.length == 0 ? [] : datas[0],
            async: true,
            freeze: true,
            onSelect: (key, data, level) => {},//console.debug(key, data, level),
            onAsyncSelect: asyncOrgChildNode,
            onChange: datas => {},//console.debug(datas),
            onExpanded: (keys, node, target) => {},//console.debug(keys, node, target),
            renderIcon: (_, node, lv) => {
                const {nodeType, icon, lastname} = node;
                if(nodeType === 'resource')
                    return <Avatar name={lastname || ''} url={icon} />;
                else if(['subcom', 'dept'].indexOf(nodeType) > -1)
                    return <Icon type={icon} color="#3e3a39" />;
                else
                    return null;
            },
            // decorator: (con, temp) => console.debug(con, temp),
            renderLeaf: node => <Leaf node={node} />,
        }

        return (
            <div className='tabPane content'>
                <VirtualOrg store={store} />
                <div className='list list-org-tree'>
                    <Tree {...treePageProps} />
                </div>
            </div>
        )
    }
}